<template>
  <div class="home">
      <router-link tag="div" class="search" to="/search">搜索</router-link>
      <ul class="con">
          <li v-for="item in list" :key="item.id" @click="goDetail(item.id)">
              <h4>{{item.title}}---{{item.author}}</h4>
              <span>{{item.con}}</span>
          </li>
      </ul>
      <footer class="footer">
          <router-link tag="div" to="/home">首页</router-link>
          <router-link tag="div" to="/my">我的</router-link>
      </footer>
  </div>
</template>

<script>

export default {
    data(){
        return {
            list:[]
        }
    },
    created(){
        this.$http.get('/api/list').then(res => {
            console.log(res)
            // if(res.data.code === 1){
            //     this.list = res.data.data;
            // }
        })
    },
    methods:{
        goDetail(id){
            this.$router.push(`/detail/${id}`)
        }
    }
}
</script>

<style lang="scss">
    .home{
        width:100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .con{
            width: 100%;
            flex:1;
        }

        .search,.footer{
            width: 100%;          
            height: 44px;
        }

        .footer{
            display: flex;
            justify-content: space-around;
            border-top:1px solid gray;
        }
    }
</style>
